<template>
  <div id="tanc_road" >
    <div class="routeHeader">
      <b>独柱墩详情</b>
      <el-button @click="closeTanc" type="danger" circle size="small" style="float: right"><el-icon><CloseBold /></el-icon></el-button>
    </div>
    <road-stones-child :roadNodesId="currentID" v-if="isDetail" @wrong="closeTanc"></road-stones-child>
  </div>

  <el-container>
    <el-header class="auditor_header">

        公路独柱墩
    </el-header>
    <el-main>
      <el-row>
        <el-col :span="4">
          <el-input v-model="inputID" placeholder="请输入独柱墩序号" />
        </el-col>
        <el-col :span="4">
          <el-button type="warning" @click="showDetail(this.inputID)">
            查询
          </el-button>
        </el-col>
      </el-row>
      <el-table :data="roadsData" stripe style="width: 100%;height: 440px;">
        <el-table-column prop="roadNodesId" label="序号" />
        <el-table-column prop="nodeName" label="独柱墩名称"/>
        <el-table-column prop="highRoads.highRoadName" label="高速公路"  />
        <el-table-column prop="nodeComment" label="状况" />
        <el-table-column  label="操作"  >
          <template #default="scope">
            <el-button  type="primary" @click="showDetail(scope.row.roadNodesId)">查看详情</el-button>
          </template>


        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          :page-sizes="[5,10,15,20]"
          @size-change="changePage"
          @current-change="changePage"
      />
    </el-footer>
  </el-container>
  <div id="hidebg"></div>
</template>

<script>
import axios from "axios";
import RoadStonesChild from "@/router/administrator/updateRoad/roadStonesChild";
import {ElMessage} from "element-plus";

export default {
  name: "roadStones",
  components: {RoadStonesChild},
  data(){
    return{
      inputID:'',
      roadsData:[],
      total: 0,
      currentPage:1,
      pageSize:5,
      currentID:'',
      isDetail:false
    }
  },
  mounted() {
    axios({
      method: 'post',
      url: '/api/road/showStone',
      params: {
        pageNum: 1,
        pageSize: 5
      },

    })
        .then((res)=>{
          this.roadsData=res.data.data.roadStoneList
          this.total=res.data.data.total
        });
  },
  methods:{
    closeTanc(){
      document.getElementById('hidebg') .style.display='none'
      document.getElementById('tanc_road') .style.display='none'
      this.changePage()
      this.isDetail=false
    },
    showDetail(a){//展示详情页
      if(a===''){
        // alert("id不能为空")
        ElMessage.warning('id不能为空')
      }else{
        this.currentID=a
        var hideobj=document.getElementById("hidebg");
        hideobj.style.display="block";  //显示隐藏层
        //hidebg.style.height=document.body.clientHeight+"px";  //设置隐藏层的高度为当前页面高度
        document.getElementById("tanc_road").style.display="block";  //显示弹出层
        this.isDetail=true
      }
    },
    changePage(){
      axios({
        method: 'post',
        url: '/api/road/showStone',
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize
        },

      })
          .then((res)=>{
            this.roadsData=res.data.data.roadStoneList
            this.total=res.data.data.total
          });
    }
  }
}
</script>

<style scoped>
.auditor_header{
  height: 40px;
  text-align: left;
  line-height: 40px;
  font-size: 20px;
  font-weight: bolder;
  border-bottom: rgba(140, 147, 157, 0.38) 1px solid;
}
.el-container{
  height: 100%;
  width: 100%;
}
.el-footer{
  text-align: center;
  position: relative;
  bottom: 0px;
}
.el-row{
  margin-bottom: 20px !important;
}
.el-pagination{
  justify-content: center !important;
}
#hidebg {
  position:absolute;
  left:0px;
  top:0px;
  background-color: #888787;
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height: 100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  display:none;
  z-Index:10;
}
#tanc_road{
  display: none;
  transform: translate(-50%,-50%);
  height: 600px;
  width: 700px;
  left: 50%;
  top:50%;
  position: absolute;
  z-index: 11;
  background-color: white;
  border: #222222 solid 1px;
}
.routeHeader{
  background-color: #409EFF;
  height: 25px;
  text-align: center;
  padding: 5px;
}
</style>